<template>
  <view class="h-qr-code" :style="[componentStyle]">
    <view class="qr-bg">
      <x-image :src="bgImgInfo.imgUrl" mode="widthFix"/>
    </view>
    <view class="qr-code" :style="{'width': qrCodeWidth, 'height': qrCodeInfo.contentStyle.width > screenWidth ? '100%' : 'auto'}">
      <x-image show-long-press :src="qrCodeInfo.imgUrl" :mode="qrCodeInfo.contentStyle.width > screenWidth ? 'aspectFit' : 'widthFix'" @longPress="longPress"/>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import formatStyle from '@/utils/x-format-style';
export default {
  name: 'HQrCode',
  components: { XImage },
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {},
      screenWidth: wx.getWindowInfo().screenWidth
    };
  },
  computed: {
    bgImgInfo() {
      return this.detail.componentContentList.find((item) => {
        return item.title === '背景图片';
      });
    },
    qrCodeInfo() {
      return this.detail.componentContentList.find((item) => {
        return item.title === '二维码';
      });
    },
    qrCodeWidth() {
      return this.qrCodeInfo.contentStyle.width / 750 * 750 + 'rpx';
    }
  },
  watch: {},
  created() {
    this.handleComponentStyle();
  },
  methods: {
    handleComponentStyle() {
      const { borderRadius, width, height, backgroundImage } = this.detail?.componentStyle;
      this.componentStyle = {
        ...formatStyle(this.detail?.componentStyle, ['marginBottom', 'backgroundColor']),
        borderRadius: borderRadius === 1 ? '20rpx' : 0,
        width: '750rpx',
        height: `${750 * height / width}rpx`,
        backgroundImage: `url(${backgroundImage})`
      };
    },
    longPress() {
      this.$XTrack('onDecorateLongPressEvent', { id: this.detail.id });
    }
  }
};
</script>

<style scoped lang="scss">
  .h-qr-code{
    width: 100%;
    position: relative;
    overflow: hidden;
    .qr-bg{
      width: 100%;
    }
    .qr-code {
      max-width: 100%;
      //height: 100%;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
